<template>
    <div style="margin-left: 10px">
      <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-circle-plus-outline" style="margin-bottom: 20px; margin-left: 10px">添加商品</el-button>
      <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
          <el-form :model="insertForm">
              <el-form-item label="商品名" :label-width="formLabelWidth">
                  <el-input v-model="insertForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                  <el-input v-model="insertForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="简介" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="insertForm.itemDescription" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="库存" :label-width="formLabelWidth">
                  <el-input v-model.number="insertForm.count" autocomplete="off"></el-input>
              </el-form-item>
              <el-upload class="upload"
                         action="http://10.196.198.178/common/upload"
                         :on-preview="handlePreview"
                         :on-remove="handleRemove"
                         :on-success="handleSuccess"
                         :file-list="fileList"
                         list-type="picture">
                  <el-button size="small" type="primary" style="margin-left: 50px; margin-top: 10px">点击上传图片</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false, insert()">确 定</el-button>
          </div>
      </el-dialog>

      <el-table
              :data="tableData"
              height="800px"
              border
              style="width: 100%"
              :default-sort = "{prop: 'itemId', order: 'ascending'}">
          <el-table-column
                  fixed
                  prop="itemId"
                  label="编号"
                  sortable
                  width="100">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="商品名称"
                  width="200">
          </el-table-column>
          <el-table-column
                  prop="price"
                  label="价格"
                  sortable
                  width="100">
          </el-table-column>
          <el-table-column
                  prop="itemDescription"
                  label="商品简介">
          </el-table-column>
          <el-table-column
                  prop="count"
                  label="库存"
                  sortable
                  width="100">
          </el-table-column>
          <el-table-column
                  label="操作"
                  width="100">
              <template slot-scope="scope">
                  <el-button @click="editFormVisible = true, fillEditForm(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click="dele(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-dialog title="编辑信息" :visible.sync="editFormVisible">
          <el-form :model="editForm">
              <el-form-item label="商品名" :label-width="formLabelWidth">
                  <el-input v-model="editForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                  <el-input v-model="editForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="简介" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="editForm.itemDescription" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="库存" :label-width="formLabelWidth">
                  <el-input v-model.number="editForm.count" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="editFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="editFormVisible = false, edit()">确 定</el-button>
          </div>
      </el-dialog>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data(){
        return {
            dialogFormVisible: false,
            insertForm: {
                name: '',
                price:'',
                itemDescription:'',
                count: '',
                image: '',
            },
            editFormVisible: false,
            editForm: {
                name: '',
                price:'',
                itemDescription:'',
                count: '',
                itemId:''
            },
            formLabelWidth: '80px',
            tableData: [],
            fileList:[],
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            axios.get('http://10.196.198.178/item/seller').then(res => {
                console.log(res.data);
                if (String(res.data.code) === '0') {
                    this.$notify.error({
                        title: '错误',
                        message: "错误"
                    });
                } else {
                    this.tableData = res.data.data;
                }
            })
        },
        fillEditForm(row) {
            this.editForm = Object.assign({}, row);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(res){
            this.insertForm.image = '/common/download?name='+res.data;
        },
        insert() {
            const item = {
                name: this.insertForm.name,
                sellerId: this.sellerId,
                price: this.insertForm.price,
                itemDescription: this.insertForm.itemDescription,
                count: this.insertForm.count,
                image: this.insertForm.image
            }
            axios.post('http://10.196.198.178/item/seller', item)
                .then((res) => {
                    console.log(res);
                    if (String(res.data.code) === '1') {
                        this.$notify({
                            title: '成功',
                            message: '商品添加成功！',
                            type: 'success'
                        });
                        this.load();
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '商品已存在！'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error);
                    alert('输入格式错误');
                });
        },
        edit() {
            const item = {
                itemId: this.editForm.itemId,
                sellerId: this.sellerId,
                price: this.editForm.price,
                itemDescription: this.editForm.itemDescription,
                count: this.editForm.count
            }
            axios.put('http://10.196.198.178/item/seller', item)
                .then((res) => {
                    console.log(res);
                    if (String(res.data.code) === '1') {
                        this.$notify({
                            title: '成功',
                            message: '商品修改成功！',
                            type: 'success'
                        });
                        this.load();
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '失败！'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error);
                    alert('输入格式错误');
                });
        },
        dele(row) {
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete('http://10.196.198.178/item/seller' + row.itemId)
                    .then((res) => {
                        console.log(res);
                        if (String(res.data.code) === '1') {
                            this.$notify({
                                title: '成功',
                                message: '商品删除成功！',
                                type: 'success'
                            });
                            this.load();
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '失败！'
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                        alert('输入格式错误');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
}
</script>
